<template>
  <div class="box">
    <el-form :model="form" label-position="right" label-width="120px" :inline="false">
      <el-form-item label="审查意见:" required style="width: 100%">
        <el-input
          :disabled="currentHandle=='详情'"
          maxlength="512"
          show-word-limit
          v-model="form.reviewOpinion"
          :rows="5"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="附件:" style="width: 100%">
        <el-upload
          v-model:file-list="attachmentFile"
          :disabled="currentHandle=='详情'"
          ref="uploadRef"
          :limit="3"
          :headers="headers"
          action="/fastDfs/file/upload"
          :on-success="handleAttachment"
          :on-preview="previewAttachment"
          :on-remove="removeAttachment"
          :on-exceed="handleExceed"
          :on-error="handleError"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { type } from '@/utils/utils'
export default defineComponent({
  props:{
    currentHandle:{
      type: String,
      default:''
    },
  },
  setup(props) {
    const store = useStore()
    const data = reactive({
      filePathArray: [] as any,
      fileNameArray: [] as any,
    })
    const form = reactive(store.state.projectCenter.auditForm)
    let attachmentFile = []
    if (form.reviewFilePath?.length > 0) {
      attachmentFile = type(form.reviewFilePath)
        ? JSON.parse(form.reviewFileName).map((item, index) => {
            return {
              name: item,
              url: JSON.parse(form.reviewFilePath)[index],
            }
          })
        : []
    }    
    console.log(attachmentFile, 'attachmentFile-acceptance')
    const handleAttachment = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        data.filePathArray.push(uploadFile.data.path)
        data.fileNameArray.push(uploadFile.data.fileName)
        form.reviewFilePath = JSON.stringify(data.filePathArray)
        form.reviewFileName = JSON.stringify(data.fileNameArray)
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    const previewAttachment = (uploadFile) => {
      console.log(uploadFile,'previewAttachment');
      if (props.currentHandle?.includes('详情')) {
        window.open(uploadFile.url)
      } else {
        window.open(uploadFile.response.data.path)
      }
      // window.open(uploadFile.response.data.path)
    }
    const removeAttachment = (file, uploadFiles) => {
      console.log(uploadFiles, 'uploadFiles')
      data.filePathArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.path
      })
      data.fileNameArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.fileName
      })
      form.reviewFilePath = JSON.stringify(data.filePathArray)
      form.reviewFileName = JSON.stringify(data.fileNameArray)
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传3个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    const cookie = () => localStorage.getItem('token')
    return {
      form,
      data,
      attachmentFile,
      handleAttachment,
      previewAttachment,
      removeAttachment,
      handleExceed,
      handleError,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
    }
  },
  beforeUnmount() {
    console.log('进度审查表格卸载了')
    for (let key in this.form) {
      this.form[key] = ''
    }
  },
})
</script>

<style lang="scss" scoped>
:deep(.el-upload-list__item.is-success.focusing .el-icon-close-tip) {
  display: none !important;
}
</style>
